<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>


<div id="app">
    <h3>添加购物车</h3>
    <p>商品编号<input type="text" v-model="product.id"></p>
    <p>商品名称<input type="text" v-model="product.name"></p>
    <p>商品价格<input type="text" v-model="product.price"></p>
    <p>商品数量<input type="text" v-model="product.number"></p>
    <p>
        <button @click="addCar">添加购物车</button>
    </p>

    <hr>

    <table border="1px" cellspacing="0" style="width: 80%">
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>总价格</th>
        </tr>
        <tr v-for="(product,index) in products" :key="index">
            <td>{{product.id}}</td>
            <td>{{product.name}}</td>
            <td>{{product.price}}</td>
            <td>
                <button @click="sub(index)">-</button>
                {{product.number}}
                <button @click="add(index)">+</button>
            </td>
            <td>{{product.price *  product.number}}</td>
        </tr>

    </table>
    <p>总计:{{totalPrice}}</p>
</div>

<script>

    let vm = new Vue({
        el: '#app',
        data: {
            product:{
                id:'',
                name:'',
                price:'',
                number:''
            },
            products:[
                {
                    id:'1',
                    name:'xiaomi14',
                    price:'1200',
                    number:'2'
                },
                {
                    id:'2',
                    name:'xiaomi13',
                    price:'1100',
                    number:'2'
                }
            ]

        },
        methods: {
            sub(index) {
                if (this.products[index].number==1){
                    alert("商品的数量至少为1");
                    return
                }
                this.products[index].number--
            },
            add(index){
                this.products[index].number++
            },
            addCar(){  // 添加购物车

                // 判定商品id   必填   id必须是数值
                if (this.product.id.trim().length==0 || isNaN(this.product.id.trim()) ){
                   alert("请填写合法的id")
                    return
                }

                // 判定商品名称
                if (this.product.name.trim().length==0){
                    alert("请填写商品名字")
                    return
                }

                // 判定商品的价格
                if (this.product.price.trim().length==0  || this.product.price <=0 ){
                    alert("请填写商品合法价格")
                    return
                }
                // 判定商品的数量
                if (this.product.price.trim().length==0  || this.product.price <=0 ){
                    alert("请填写商品合法数量")
                    return
                }

                this.products.push(this.product)
                this.product = {}
            }
        },
        computed:{
            totalPrice(){
                // 遍历商品数组
                let total = 0
                this.products.forEach(pdt=>{
                        total+= pdt.price * pdt.number
                })
                return  total
            }
        }

    })

</script>
</body>
</html>